<template>
  <!-- 公司主体模块 -->
  <div>
    <!-- 外层容器 -->
    <div class="box">
      <!-- 头部 -->
      <div class="header">
        <!-- 头部左 -->
        <div class="h-lt">
          <img src="@/assets/img/3.png"
               alt="">
        </div>
        <!-- 头部右 -->
        <div class="h-rt">
          <div class="h-rt-rt">
            <a href="#content">查看所有职位</a>
          </div>
          <div class="h-rt-lt">
            <h1 class="h-rt-lt-top">深圳欧陆通电子股份有限公司</h1>
            <div class="h-rt-lt-cen">
              民营公司&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;1000-5000人&nbsp;&nbsp;<span>|</span> &nbsp;&nbsp;电子技术/半导体/集成电路&nbsp;&nbsp;通信/电信/网络设备

            </div>
            <div class="h-rt-lt-bom">营业执照:&nbsp;&nbsp;深圳欧陆通电子股份有限公司</div>
          </div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="body">
        <div class="body-txt">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深圳欧陆通电子股份有限公司，是集电源的研发、设计、生产、销售于一体的国家高新技术企业；总部位于深圳，同时在多个发达国家、地区设立分子公司及办事处。公司集中生产电源适配器、服务器电源等，服务国际知名企业，产品远销美国、欧洲、韩国、日本等国家和地区。目前，公司已获得国家高新技术企业、深圳市博士后创新实践基地、深圳市企业技术中心、宝安区技术中心、深圳市自主创新示范企业、深圳知名品牌、深圳市质量百强企业等荣誉资质。
          <br>
          &nbsp;&nbsp;&nbsp;&nbsp;公司秉承以市场为导向、以创新为原动力、以客户需求为目标的发展指导思想，不断建立健全企业研发、生产和管理制度，不断开拓市场的发展指导思想，持续打造一体两翼三地的发展格局，以立足深圳、辐射全国、放眼全球为企业发展战略，将企业建设成为行业领先的电源知名品牌。
        </div>
        <!-- 主体图片内容 -->
        <div class="body-img">
          <div class="body-img-top">
            <a class="pho"> <img src="@/assets/img/4.jpg"
                   alt=""></a>
            <a class="pho"> <img src="@/assets/img/5.jpg"
                   alt=""></a>
          </div>
          <div class="body-img-bom"><span class="qian">公司地址</span>:&nbsp;&nbsp;<span class="hou">深圳市宝安区西乡街道固戍二路星辉科技园A栋一楼 (邮编：518102) </span></div>
        </div>
      </div>
      <!-- 职位信息 -->
      <div class="content"
           id="content">
        <div class="headline">公司所有职位</div>
        <div class="content bod">
          <el-table :data="tableData"
                    style="width:100%"
                    :show-header="false"
                    :cell-style="cellStayle"
                    :id="tableData.id">
            <el-table-column prop="PositionName"
                             width="240"
                             cell-style="color:red"
                             ref="clmid">
              <template slot-scope="scope">
                <div class="wai">
                  <a @click="dianji(scope.$index) "
                     class="li">{{
                  scope.row.PositionName
                }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Exp"
                             width="240"
                             cell-class-name='clum2'>
            </el-table-column>
            <el-table-column prop="Area"
                             width="240"
                             cell-class-name='clum3'>
            </el-table-column>
            <el-table-column prop="Money"
                             width="240"
                             cell-class-name='clum4'>
            </el-table-column>
            <el-table-column prop="CreateTime"
                             width="240"
                             cell-class-name='clum5'>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="btn">
        <div class="btn-c">
          <el-button-group>
            <el-button icon="el-icon-caret-left"
                       size="small"
                       @click="homepage">首页</el-button>
            <el-button icon="el-icon-arrow-left"
                       size="small"
                       @click="previouspage">上一页</el-button>
            <el-button size="small"
                       @click="nextpage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            <el-button size="small"
                       @click="lastpage">尾页<i class="el-icon--right el-icon-caret-right"></i></el-button>
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
export default {
  data () {
    return {
      tableData: [],
      date: {}
    }
  },
  created () {
    let data = { pageindex: 1, pagesize: 10 }
    this.$http.post(uri.getInfoList, data).then((res) => {
      // console.log(res)
      this.tableData = res.data.Items
      this.date = res.data
      console.log(this.tableData)
    })
  },
  methods: {
    // 首页
    homepage () {
      this.date.CurrentPage = 1
      this.tableData = []
      let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
      this.$http.post(uri.getInfoList, data).then((res) => {
        console.log(res)
        this.tableData = res.data.Items
        // this.tips = this.arr.Tips.split(",")
        // console.log(this.arr)
      })

    },
    // 上一页
    previouspage () {
      if (this.date.CurrentPage > 1) {
        this.date.CurrentPage--
        this.tableData = []
        let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
        this.$http.post(uri.getInfoList, data).then((res) => {
          console.log(res)
          this.tableData = res.data.Items
          // this.tips = this.arr.Tips.split(",")
          // console.log(this.arr)
        })
      }
    },
    // 下一页
    nextpage () {
      if (this.date.CurrentPage < this.date.TotalPages) {
        this.date.CurrentPage++
        this.tableData = []
        let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
        this.$http.post(uri.getInfoList, data).then((res) => {
          console.log(res)
          this.tableData = res.data.Items
          // this.tips = this.arr.Tips.split(",")
          // console.log(this.arr)
        })
      } else {

      }
    },
    // 末页
    lastpage () {
      this.date.CurrentPage = this.date.TotalPages
      this.tableData = []
      let data = { pageindex: this.date.CurrentPage, pagesize: 10 }
      this.$http.post(uri.getInfoList, data).then((res) => {
        console.log(res)
        this.tableData = res.data.Items
        // this.tips = this.arr.Tips.split(",")
        // console.log(this.arr)
      })
    },
    // 设置每一列的样式
    cellStayle ({ row, columnIndex }) {
      if (columnIndex === 0) {
        return 'font-size : 16px;color: #333;cursor:pointer'
      } if (columnIndex === 1) {
        return 'color : #666'
      } if (columnIndex === 2) {
        return 'color : #999'
      } if (columnIndex === 3) {
        return 'color: #ff6000;font-size:16px'
      } if (columnIndex === 4) {
        return ' color: #999;'
      }
    },
    // 点击跳转
    dianji (index) {
      console.log(index)
      // 点击跳转
      // this.$router.push("/detail/");
      let id = this.tableData[index].Id
      let routeData = this.$router.resolve({
        path: "/detail/",
        query: {
          id: id
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');

    },
    // 移入事件

    // 移出事件
  }
}
</script>

<style scoped>
body {
  padding: 0;
  margin: 0;
}
.box {
  width: 50%;
  min-width: 1200px;
  margin: 0 auto;
}
.header {
  min-height: 114px;
  border-bottom: 1px solid #ccc;
  padding-top: 23px;
}
.h-lt {
  float: left;
}
.h-lt img {
  height: 90px;
  width: 90px;
  border: 1px solid #e8e8e8;
}
.h-rt {
  width: 1090px;
  float: right;
  height: 92px;
}
.h-rt-lt-top {
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 10px 10px 0;
}
.h-rt-lt-cen {
  font-size: 14px;
  margin-bottom: 11px;
  color: #666;
}
.h-rt-lt-cen span {
  color: #e8e8e8;
}
.h-rt-lt-bom {
  font-size: 14px;
  color: #666;
}
.h-rt-lt {
  width: 600px;
}
.h-rt-rt {
  float: right;
}
.h-rt-rt a {
  text-decoration: none;
  font-size: 14px;
  color: #35acf1;
}
.body {
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
}
.body-txt {
  line-height: 40px;
}
.pho {
  width: 120px;
  height: 120px;
  border: 2px solid #ccc;
  display: inline-block;
  padding: 15px;
  cursor: pointer;
  margin-right: 30px;
}
.pho:hover {
  border: 2px solid #00c9ff;
}
.pho img {
  width: 100%;
  height: 100%;
}
.body-img {
  padding-top: 35px;
}
.body-img-bom {
  font-size: 14px;
  padding: 30px 0;
}
.qian {
  color: #333;
}
.hou {
  color: #666;
}
.headline {
  height: 25px;
  line-height: 25px;
  font-size: 18px;
  font-weight: bold;
  text-indent: 0;
  padding-left: 15px;
  border-left: 4px solid #ff6000;
}
.content {
  padding: 35px 0 10px;
}
.clum1 {
  color: red;
}
.wai:hover .li {
  color: #ff6000;
}
.btn {
  width: 100%;
  height: 60px;
}
.btn-c {
  margin: 0 auto;
  min-width: 1200px;
  width: 50%;
  top: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
</style>